import React, { Component } from "react"
import "./style.css"
export class TabControl extends Component {
    constructor() {
        super()
        this.state = {
            isCurTab: 0,
        }
    }

    itemClick(index){

        this.setState({
            isCurTab: index
        })
        this.props.tabIndexChange(index)
    }

    render() {
        const { isCurTab } = this.state
        const { titles } = this.props

        return (
            <div className="tab-control">
                {titles.map((item, index) => {
                    return (
                        <div className={isCurTab === index ? "item active" : "item"} key={item} onClick={()=>this.itemClick(index)}>
                            <span className="text">{item}</span>
                        </div>
                    )
                })}
            </div>
        )
    }
}

export default TabControl
